<template>
    <el-card class="fs-14">
        <div class="flex flex-jc-sb">
            <div class="bold">收款账户</div>
            <div class="pointer flex items-center" @click="showAccount('add')">
                <el-icon>
                    <Plus />
                </el-icon>
                <span class="mg-l-5">新增</span>
            </div>
        </div>
        <div class="table-box mg-t-20">
            <el-table :data="tableData" stripe style="width: 100%">
                <template v-for="(i, index) in tableHeader" :key="index">
                    <el-table-column :prop="i.prop" :label="i.label" />
                </template>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="showAccount('update', scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    <receiptAccount v-model:show="show" :type="addType" :channel-id="channelId" :cur-item="curItem" @success="getList" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

import { getAccountList, removeAccount } from 'api/tools/manageAccount.ts'

import receiptAccount from '../dialog/receiptAccount.vue'

const props = defineProps({
    channelId: {
        type: [String, Number]
    }
})

const show = ref(false)
const addType = ref('add')

const curItem = ref({})

const tableData = ref([])
const tableHeader = ref([
    {
        prop: 'bankName',
        label: '收款账户名',
    },
    {
        prop: 'bankNameAbbreviation',
        label: '账户简称',
    },
    {
        prop: 'openBank',
        label: '开户行',
    },
    {
        prop: 'bankNo',
        label: '银行卡号',
    },
    {
        prop: 'wechatMchId',
        label: '微信商户号',
    },
])

const showAccount = (type, item) => {
    show.value = true
    addType.value = type
    curItem.value = item
}

const getList = () => {
    getAccountList({
        channelId: props.channelId,
        pageSize: 1000,
        pageNum: 1
    }).then(res => {
        tableData.value = res.list
    })
}

const handleRemove = (item) => {
    ElMessageBox.confirm(
        `是否确认删除收款账户名为${item.bankName}的数据项?`,
        '警告',
        {
            type: 'warning',
        }
    )
        .then(() => {
            doRemove(item.id)
        })
}

const doRemove = (id) => {
    removeAccount(id).then(res => {
        getList()
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    })
}

watch(() => props.channelId, (newval) => {
    if (newval) {
        getList()
    }
})

defineExpose({
    getList
})
</script>
<style lang="scss" scoped></style>